<template>
  <div class="child-component">
    <h3>子组件</h3>
    <p>这是一个子组件，用于演示样式隔离和深度选择器的使用。</p>
    <button class="btn" @click="count++">点击次数: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<style scoped>
.child-component {
  border: 1px solid #eee;
  border-radius: 4px;
}

h3 {
  color: #666;
  margin-top: 0;
}

.btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #45a049;
}
</style>
